
import React, {Component} from 'react';
import  LinearGradient from 'react-native-linear-gradient';
import * as RootNavigation from '../../../App';
import MyButton from '../../widget/my_button'
import NetUtil from '../../net/net_util'
import Toast from "../../widget/Toast";
import Loading from "../../widget/Loading";
import {checkPhone} from '../../util/index'
import user from '../../common/user'
import Storage from '../../util/storage_util';
import {
  Alert,
  Button,
  TextInput,
  Text,
  View,
  Image,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
  Keyboard,
  TouchableWithoutFeedback,
  DeviceEventEmitter
} from "react-native";

class Login_page extends Component{
  constructor(props) {
    super(props);
    this.timer=null;
    this.second=60,
    this.state={
      phone:'',
      code:'',
      sendMsg:"获取验证码"
    }
  }
  componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }
  componentWillUnmount() {
    clearInterval(this.timer)
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidShow () {

  }
  _keyboardDidHide () {
    Keyboard.dismiss()
  }
  /*登录*/
  login(){
    if(!this.state.phone){
      Toast.add('手机号不能为空');
      return
    }
    if(!checkPhone(this.state.phone)){
      Toast.add('手机号不正确');
      return
    }
    if(!this.state.code){
      Toast.add('验证码不能为空');
      return
    }
    let params={
      code:this.state.code,
      mobile:this.state.phone
    }
    this._keyboardDidHide()
    Loading.show()
    NetUtil.postFrom('auth/app/login',params,(res)=>{
      Loading.hide()
      if(res.code==200){
        user.setUser({token:res.data.token})
        Storage.save({key:'token',data:{'token':res.data.token}})
        DeviceEventEmitter.emit('login',{isLogin:true})
      }
      else {
        Toast.add(res.msg)
      }
    })
  }
  /*发送验证码*/
  sendCode(){
    if(!this.state.phone){
      Toast.add('手机号不能为空');
      return
    }
    if(!checkPhone(this.state.phone)){
      Toast.add('手机号不正确');
      return
    }
    Loading.show();
    NetUtil.postFrom('member/login/send/sms',{mobile:this.state.phone},(res)=>{
      Loading.hide()
      if(res.code==200){
        Toast.add('发送成功')
        this.setState({code:res.data})
        this.timer=setInterval(()=>{
          if(this.second==0){
            clearInterval(this.timer);
            this.second=60;
            this.setState({sendMsg:'获取验证码'});
          }
          else {
            this.second--
            this.setState({sendMsg:`${this.second}后重新获取`})
          }
        },1000)
      }
      else {
        Toast.add(res.msg)
      }
    })
  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={()=>{Keyboard.dismiss()}}>
        <View style={styles.container}>
          <Image style={styles.logo} source={require('../../img/logo.png')}></Image>
          <View style={styles.inputBox}>
            <View style={styles.input}>
              <Text>+86</Text>
              <TextInput style={{marginLeft:32,fontSize:14,flex:1}} maxLength={'11'} clearButtonMode={'while-editing'} keyboardType={'number-pad'} value={this.state.phone} defaultValue={this.state.phone} onChangeText={text=>this.setState({phone:text})} maxLength={11} placeholder="请输入手机号"></TextInput>
            </View>
            <View style={[styles.input,styles.code]}>
              <TextInput style={{flex:1,fontSize:14,marginRight:20}} maxLenth={'4'} clearButtonMode={'while-editing'} keyboardType={'number-pad'} value={this.state.code} defaultValue={this.state.code} onChangeText={text=>this.setState({code:text})} placeholder="输入验证码" maxLength={4}></TextInput>
              <TouchableOpacity onPress={this.sendCode.bind(this)}>
                <Text style={{fontSize:14,color:'#E39354'}}>{this.state.sendMsg}</Text>
              </TouchableOpacity>
            </View>
            <LinearGradient colors={['#DCA064','#F2CA78',]} style={styles.login} start={{x:0,y:0}}>
              <MyButton underlayColor='gray'
                        underlayTxtColor='#FFFFFF'
                        txtStyle={{color:'#fff',fontSize: 16}}
                        style={{height:40}}
                        onPress={this.login.bind(this)}
              >登录</MyButton>
            </LinearGradient>
          </View>
          <Text style={styles.private}>登录即表示您已阅读并同意<Text style={{color:'#333333'}}>《隐私保护协议》</Text></Text>
          <Toast></Toast>
          <Loading></Loading>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}
const styles=StyleSheet.create({
  container:{
    flex:1,
    position:'relative',
    backgroundColor:'#fff'
  },
  logo:{
    position: 'relative',
    marginTop:'50%',
    width:72,
    height:72,
    left:'50%',
    marginLeft:-36
  },
  inputBox:{
    paddingLeft:32,
    paddingRight:32,
    marginTop: 50,
  },
  input:{
    flexDirection:'row',
    alignItems:'center',
    height:50,
    borderBottomColor:'#F0F0F0',
    borderBottomStyle:'solid',
    borderBottomWidth:1,
  },
  code:{
    flexDirection: 'row',
    justifyContent:'space-between',
    color:'#E39354',
    fontSize:14,
    marginTop:10
  },
  login:{
    height:40,
    borderRadius:20,
    marginTop:28
  },
  private:{
    position:'absolute',
    bottom:43,
    width: '100%',
    textAlign:'center',
    color:'#999999',
    fontSize: 12
  }
})

export default module = Login_page;
